<template>
  <div class="alarmPieBox board-border">
    <div class="pieBox">
      <NormalPie :pieData="pieData"></NormalPie>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import api from '@api/api';
import { getRoleId } from '@/unit/tool';
// import { RepairType } from '@/unit/constantValue';
import NormalPie from '@components/echart/normalPie';
import { themeOption } from '@components/echart/buildEChartOption';
import '@assets/styles/publicStyle/index.less';

import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('board/');

function buildPieData(pieDataLists, titleStr, subTitleStr) {
  let lists = [{ option: {}, data: [] }];
  let dataLists = [];
  let legendData = [];
  // 控制显示的项目数
  // let showCount = 10;

  pieDataLists.forEach((item, index) => {
    let { name, value } = item;
    dataLists.push({
      name,
      value,
    });
  });

  dataLists = dataLists.sort((a, b) => {
    return b.value - a.value;
  });
  // .slice(0, showCount);

  legendData = dataLists.map((item, index) => {
    let name = item.name == '' ? '未知字段' : item.name;
    return name;
  });

  lists[0].option = {
    radius: ['55', '75'],
    center: ['170', '160'],
    label: {
      position: 'outside',
      formatter: '{a|{d}%}\n{b|{b}}',
      // formatter: function(e) {
      //   let newValue = Math.ceil(parseFloat(e.percent));
      //   if (newValue >= 5) {
      //     return newValue + '%';
      //   } else {
      //     return '';
      //   }
      // },
      padding: [0, -50],
      rich: {
        a: {
          // color: '#333',
          fontSize: 16,
          lineHeight: 20,
        },
        hr: {
          borderColor: '#333',
          width: '100%',
          borderWidth: 0.5,
          height: 0,
        },
        b: {
          fontSize: 16,
          lineHeight: 20,
          // color: '#333',
        },
      },
    },
    labelLine: {
      // length: 640 / 50,
      // length2: 640 / 100,
      length: 24,
      length2: 48,
      // showAbove: true,
      minTurnAngle: 90,
    },
  };

  lists[0].data = dataLists;
  return {
    // tooltip: {
    //   formatter: (params) => `<p>${params.marker}${params.name}&nbsp;${parseInt(moment.duration(params.value * 1000).asHours())}小时</p>`,
    // },
    graphic: [
      {
        type: 'text',
        left: 148,
        top: 150,
        style: {
          text: titleStr,
          textAlign: 'center',
          fill: '#FFFFFF',
          fontSize: 18,
          fontWeight: 700,
        },
      },
      {
        type: 'text',
        left: 134,
        top: 172,
        style: {
          text: subTitleStr,
          textAlign: 'center',
          fill: '#FFFFFF',
          fontSize: 18,
          fontWeight: 400,
        },
      },
    ],
    legend: {
      orient: 'vertical',
      left: '360',
      top: '80',
      icon: 'circle',
      // data: legendData,
      data: [],
      textStyle: {
        fontSize: 12,
        fontWeight: 200,
        color: '#FFFFFF',
      },
      // formatter: (params) => {
      //   let str = '';
      //   dataLists.forEach((item, index) => {
      //     if (params == item.name) {
      //       str = `${item.name} : ${parseInt(moment.duration(item.value * 1000).asHours())}小时`;
      //     }
      //     return false;
      //   });

      //   return str;
      // },
    },
    dataLists: lists,
  };
}

function formatAlarmType(value) {
  switch (parseInt(value)) {
    case 1:
      return '一级报警';
    case 2:
      return '二级报警';
    case 3:
      return '三级报警';
    case 4:
      return '系统提示信息';
    default:
      break;
  }
}

export default {
  name: 'calendarDetail',
  components: {
    NormalPie,
  },
  props: {},
  data() {
    return {
      userName: '',
      name: '',
      role: '',
      compId: '',
      pieData: {},
    };
  },
  watch: {
    timeSwich: function(newValue, oldValue) {
      let { startTime, endTime } = newValue;
      this.boardMacAlarmStatisticByCompId({ startTime, endTime }, 'pieData');
    },
  },
  computed: {
    ...mapState(['timeSwich']),
  },
  methods: {
    // 获取报警统计
    async boardMacAlarmStatisticByCompId(parames, key) {
      const resData = await api.boardMacAlarmStatisticByCompId({ compId: this.compId, ...parames });

      let dataLists = [];
      let total = 0;
      // let { color } = themeOption;

      dataLists = resData.map((item, index) => {
        total = total + parseInt(item.rate * 10000);
        return {
          name: formatAlarmType(item.alarmType),
          value: parseInt(item.rate * 10000),
        };
      });

      this[key] = buildPieData(dataLists, total, '报警总数');
      console.log(this[key]);
    },
  },
  created() {},
  mounted() {
    getRoleId(this);
  },
};
</script>

<style scoped="scoped" lang="less">
@import './style.less';
</style>
